<template>
  <div class="button">
    <a-button type="primary" @click="getPDF2">生成PDF2</a-button>
  </div>
  <div id="pdf-preview" ref="pdfContentRef">
    <Layout> <pageOne /> </Layout>
    <Layout> <pageTwo /> </Layout>
    <Layout> <pageThree /> </Layout>
    <Layout> <pageFour /> </Layout>
    <Layout> <pageFive /> </Layout>
    <Layout> <pageSix /> </Layout>
    <Layout> <pageSeven /> </Layout>
    <Layout> <pageEight /> </Layout>
    <Layout> <pageNight /> </Layout>
  </div>
</template>

<script setup>
import { ref } from "vue";
import Layout from "./Layout.vue";
import pageOne from "./components/page_1.vue";
import pageTwo from "./components/page_2.vue";
import pageThree from "./components/page_3.vue";
import pageFour from "./components/page_4.vue";
import pageFive from "./components/page_5.vue";
import pageSix from "./components/page_6.vue";
import pageSeven from "./components/page_7.vue";
import pageEight from "./components/page_8.vue";
import pageNight from "./components/page_9.vue";

//  ==========pdf================================
// 引入 html2pdf.js 和 pdfMake 库
import { htmlPdf } from "./js/htmlToPDF";
import { nextTick } from "vue";
const pdfContentRef = ref();
const getPDF2 = async () => {
  let element = pdfContentRef.value;

  // 代码步骤就两步
  let fileList = pdfContentRef.value.querySelectorAll("& > div");

  // 第二步使用
  await htmlPdf(Date.now(), element, fileList);

  nextTick(() => {
    let all_remove = pdfContentRef.value.querySelectorAll(".divRemove");
    all_remove.forEach((element) => {
      element.parentNode.removeChild(element);
    });
  })
};
</script>

<style>
body {
  font-size: 16px;
}
</style>

<style scoped lang="less">
.button {
  position: fixed;
  right: 30px;
  top: 30px;
  z-index: 9;
}
#pdf-preview {
  overflow: hidden;
}
</style>
